/**
 * 创建时:componentDidMount(): 发Ajax请求,DOM操作
 * 更新时:componentDidUpdate(): 接收Ajax请求,更新DOM操作
 * 卸载时:componentWillUnmount(): 在组件卸载及销毁之前直接调用,销毁操作。
 */
import React, { Component } from "react";
class MyLife extends Component{
    state={
        num:1
    }
    constructor(){
        console.log("1....构造方法");
        super();
    }
    update=()=>{
        this.setState({
            num:this.state.num+1
        })
    }
    render(){   //数据渲染时执行
        console.log("2.....render进行渲染");
        return(
            <div>
                <h1>组件生命周期{this.state.num}</h1>
                <button onClick={this.update}>更新/攻击</button>
                {this.state.num>3 ? <span>英雄噶了</span>:<Hero life={this.state.num}></Hero>}
            </div>
        )
    }
    componentDidMount(){
        console.log("3.....组件挂载");
    }
    componentDidUpdate(){   //属性发生更新或者state发生更新触发
        console.log(".....组件更新");
    }
    
}
//子组件用于测试componentWillUnmount()卸载触发
class Hero extends Component{
    componentWillUnmount(){ //卸载触发
        console.log("....组件卸载");
    }
    render(){
        return <h3>英雄被攻击次数:{this.props.life}</h3>
    }
}
export default MyLife